<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Calendar Service</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<script type="text/javascript" src="script/platformservices.js" charset="utf-8"></script>
        <script type="text/javascript" src="script/templates.js" charset="utf-8"></script>
        <script type="text/javascript" src="script/platformservices_20_specific.js" charset="utf-8"></script>
        <script type="text/javascript" src="script/basic.js" charset="utf-8"></script>
        <link href="styles/reset.css" rel="stylesheet" type="text/css" />
        <link href="styles/baseStyles.css" rel="stylesheet" type="text/css" />

	</head>
    <body>
        <div id="wraper">
        	<div id="content">
            <h1 id="header" class="top-aligned">Calendar Events</h1>
            <div id="eventListContainer">
                <form id="f1" name="f1">
                    <ul class="nav-horizontal-rounded stack">
                        <li class="first two-piece">
                            <a href="#" onclick="newEntry();">New Event</a>
                        </li>
                        <li class="last two-piece">
                            <a href="#" onclick="startEditor();">Start Editor</a>
                        </li>
                    </ul>
                    <div style="display:block">
                        <br />
                        <br />
						<br />
                    </div>
                    <table>
                        <tr>
                            <th>
                                <label for="filterType">
                                    Event type:
                                </label>
                            </th>
                            <th>
                                <label for="filterStartDate">
                                    Start date:
                                </label>
                            </th>
                            <th>
                                <label for="filterEndDate">
                                    End date:
                                </label>
                            </th>
                        </tr>
                        <tr>
                            <td>
                                <select onchange="list();" name="filterType" id="filterType" size="1">
                                    <option value="">All</option>
                                    <option value="Meeting">Meeting</option>
                                     <option value="DayEvent">Memo</option>
                                    <option value="ToDo">ToDo</option>
                                    <option value="Anniversary">Anniversary</option>
                                </select>
                            </td>
                            <td>
                                <input onchange="list();" type="text" name="filterStartDate" size="10" id="filterStartDate" value=""/>
                            </td>
                            <td>
                                <input onchange="list();" type="text" name="filterEndDate" size="10" id="filterEndDate" value=""/>
                            </td>
                        </tr>
                    </table>
                    <div id="entryList">
                    </div>
                </form>
            </div>
            <div id="newEventFormContainer" style="display:none">
                <form id="f2">
                    <table>
                        <tr>
                            <td>
                                <label for="type">
                                    Event type:
                                </label>
                            </td>
							<td>
                                <select onchange="adjustForm(this.options[this.selectedIndex].value)" name="type" id="type" size="1">
                                    <option value="Meeting">Meeting</option>
                                    <option value="DayEvent">Memo</option>
                                    <option value="ToDo">ToDo</option>
                                    <option value="Anniversary">Anniversary</option>
												   
                                </select>
                            </td>
                        </tr>
                          <tr>
                            <th id="descriptionContainer" colspan="2">
                                <label for="description">
                                    Description:
                                </label>
                            </th>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <textarea name="description" id="description" rows="1"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <th id="locationContainerL" colspan="2">
                                <label for="location">
                                    Location:
                                </label>
                            </th>
                        </tr>
                        <tr id="locationContainer">
                            <td colspan="2">
                                <input type="text" name="location" id="location" size="15" value=""/>
                            </td>
                        </tr>
                        <tr id="startDateContainerL">
                            <th>
                                <label for="startDate">
                                    Start date:
                                </label>
                            </th>
                            <th id="startTimeContainerL">
                                <label for="startTime">
                                    Start time :
                                </label>
                            </th>
                        </tr>
                        <tr id="startDateContainer">
                            <td>
                                <input style="-wap-input-format: '*n'" type="text" name="startDate" id="startDate" size="10" value=""/>
                            </td>
                            <td id="startTimeContainer">
                                <input style="-wap-input-format: '*n'" type="text" name="startTime" id="startTime" size="5" value=""/>
                            </td>
                        </tr>
                        <tr id="endDateContainerL">
                            <th>
                                <label for="endDate">
                                    End date:
                                </label>
                            </th>
                            <th  id="endTimeContainerL">
                                <label for="endTime">
                                    End time:
                                </label>
                            </th>
                        </tr>
                        <tr  id="endDateContainer">
                            <td>
                                <input style="-wap-input-format: '*n'" type="text" name="endDate" id="endDate" size="10" value=""/>
                            </td>
                            <td id="endTimeContainer">
                                <input style="-wap-input-format: '*n'" type="text" name="endTime" id="endTime" size="5" value=""/>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <label for="alarmOnOff">
                                    Alarm:
                                </label>
                                <input type="radio" onchange="showHideAlarm(this);" name="alarmOnOff" id="alarmOn" value="on"/>On<input type="radio" name="alarmOnOff" id="alarmOff" onchange="showHideAlarm(this)" value="off" checked/>Off
                            </td>
                        </tr>
						<!--  style="display:none" -->
                        <tr id="alarmContainerL" style="display:none">
                            <th>
                                <label for="alarmDate">Alarm date:</label>
                            </th>
                            <th>
                                <label for="alarmTime">
                                    Alarm time:
                                </label>
                            </th>
                        </tr>
                        <tr id="alarmContainer" style="display:none">
                            <td>
                                <input style="-wap-input-format: '*n'" type="text" name="alarmDate" size="10" id="alarmDate" value=""/>
                            </td>
                            <td>
                                <input style="-wap-input-format: '*n'" type="text" name="alarmTime" id="alarmTime" size="5" value=""/>
                            </td>
                        </tr>
                    </table>
                    <ul class="nav-horizontal-rounded stack">
                        <li class="first two-piece">
                            <a href="#" onclick="add();">Save</a>
                        </li>
                        <li class="last two-piece">
                            <a href="#" onclick="showEventList();">Cancel</a>
                        </li>
                    </ul>
                </form>
            </div>
        </div>
		</div>
    </body>
</html>
